<template>
    <div class="scrolltop-wrap" @click="handleClick">
        <div class="hover-tip">
            返回顶部
            <div class="tip-box">◆</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "scrollTop",
    methods: {
        handleClick() {
            $("html, body").animate({scrollTop: "0px"}, 200);
            setTimeout(function() {
                $("html, body").stop();
            }, 200)
        }
    },
    mounted() {
        $(window).scroll(function() {
            showUp($(".scrolltop-wrap"));
        })

        function showUp(obj) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop > window.innerHeight) {
                obj.css({"display": "block"});
            }else {
                obj.css({"display": "none"});
            }
        }
    }
}
</script>

<style lang="scss">
@import "../style/scroll-top";
</style>

